<template>
  <div id="question_create">
    <el-container style="height: 100%;">
      <el-aside width="200px" style="background-color: #fff;height: 100%;width: 200px;">
        <el-scrollbar style="height: 100%;width: 200px;">
          <ul style="padding: 0 10px;margin: 0;">
            <li v-for="(item,index) in btnList" :key="index">
              <el-button style="width:100%;" @click="showAddBox(item.type)">{{item.label}}</el-button>
            </li>
          </ul>
        </el-scrollbar>
          
      </el-aside>
      <el-main style="padding: 0 10px;">
        <el-scrollbar style="height: 100%;">
          <!-- <el-card class="box-card" style="height: 100%;width: 100%;">
          </el-card> -->
          <div style="width: 100%;height: 100%;">
            <add_question_dialog v-if="showAdd" :question_type="question_type"></add_question_dialog>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import add_question_dialog from '@/add_question_dialog'
export default {
  name: 'question_create',
  components: {add_question_dialog},
  data(){
    return{
      btnList:[
        {type:'radio',label:'单选题' },
        {type:'checkbox',label:'多选题' },
        {type:'input',label:'填空题' },
        {type:'sort',label:'排序题' },
        {type:'img',label:'图片上传' },
        {type:'huadong',label:'滑动条' },
        {type:'radio',label:'比重题' },
        {type:'radio',label:'打分题' },
        {type:'radio',label:'NPS量表' },
        {type:'radio',label:'商品题' },
        {type:'radio',label:'矩阵单选' },
        {type:'radio',label:'矩阵多选' },
        {type:'radio',label:'矩阵填空' },
        {type:'radio',label:'矩阵滑动' },
        {type:'radio',label:'矩阵量表' },
        {type:'radio',label:'表格文本题' },
        {type:'radio',label:'表格数值题' },
        {type:'radio',label:'表格下拉题' },
        {type:'radio',label:'分页' },
        {type:'radio',label:'段落说明' },
      ],
      questList:[],
      showAdd:false,
      question_type:''
    }
  },
  methods:{
    showAddBox(type){
      this.question_type = type
      this.showAdd = true
    }
  }
}
</script>

<style>
#question_create,body,html{
  height: 100%;
  background-color: #f2f7fb;
}
#question_create {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #f2f7fb;
}


li{
  margin-top: 10px;
}
li:last-child{
  margin-bottom: 10px;
}
</style>
<style lang="less" scoped>
.el-scrollbar {
  width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
  height: 100%; // 必须设置el-scrollbar的高度
  /deep/ .el-scrollbar__wrap { // 实际上我们的内容是放在这个div下面的
    height: 105%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条
    // height: 100%;
    overflow: scroll;
    overflow-x:auto;
  }
}
</style>